﻿<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
    <meta charset="UTF-8">
    <title>选择本地照片或拍照上传</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!--基本JS、CSS和服务-->
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="../Scripts/jridgecommon.js"></script>
    <!--angular-->
    <script src="Scripts/angular_1.5.8/angular.min.js"></script>
    <script src="Scripts/AngularMaterial/angular-animate.min.js"></script>
    <script src="Scripts/AngularMaterial/angular-aria.min.js"></script>
    <script src="Scripts/AngularMaterial/angular-material.min.js"></script>
    <link href="Content/angular-material.min.css" rel="stylesheet" />
    <!--文件上传-->
    <script type="text/javascript" src="Scripts/stream-v1-phone.js"></script>
    <link href="css/uploadfile.css" rel="stylesheet" />
    <!--自己的JS和CSS-->
    <script src="js/phone.js"></script>
    <link href="css/phone.css" rel="stylesheet" />
    <style>
        button {
            outline: none;
        }
    </style>
</head>

<body ng-controller="demoCtrl" id="b">

    <!--拍照框-->
    <div id="main_body" layout="column" layout-padding>
        <div class="title">
            <p>简睿捷PDM系统&nbsp;:&nbsp;拍照上传 </p>
            <!-- <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <span>
                        <img src="images/setting.png" />
                    </span>
                </a>
                <ul class="dropdown-menu pull-right">
                    <li>
                        <span class="glyphicon glyphicon-camera"></span>
                        重新拍照
                    </li>
                    <li style="margin-left:-10px;">
                        <a href="pdm.html">
                            <span class="glyphicon glyphicon-file"></span>
                            <span style="margin-left:2px;">前往PDM</span>
                        </a>
                    </li>
                </ul>
            </div> -->
            <div style="margin-top:50px" v-if="fileName!==''">文件名：{{fileName}}</div>
        </div>

        <div style="position:relative;z-index:999;top:40%;left:30%;">
            <div id="loading" style="display:none">
                <img src="./Img/loading.gif" style="width:40%">
            </div>
        </div>
        <!--选择文件的区域-->
        <div id="i_select_files"></div>

        <!--图片预览-->
        <div id="previewPic"></div>

        <!--已选择的文件队列-->
        <div id="i_stream_files_queue" style="display:none"></div>



        <!--底部功能框-->
        <div layout-xs="column" layout-sm="row" layout-align="center">
            <a flex-xs="100" flex-sm="50" flex-gt-sm="50" ng-show='uploadMsg.succ' href="javascript:;" style="text-align: center;text-decoration: none;"
                class="btn btn-success" disabled>上传成功</a>
            <a flex-xs="100" flex-sm="50" flex-gt-sm="50" ng-show="uploadMsg.err" href="javascript:;" style="text-align: center;text-decoration: none;"
                class="btn btn-danger" disabled>上传失败</a>
            <a flex-xs="100" flex-sm="50" flex-gt-sm="50" ng-show="uploadMsg.typeErr" href="javascript:;" style="text-align: center;text-decoration: none;"
                class="btn btn-danger" disabled>格式有误</a>
        </div>
        <div class="phone_buttons">
            {{}}
            <p>请选择上传路径</p>
            <div layout="row" id="buttons">
                <input type="text" class="form-control input-lg" readonly value="{{folderSelected}}" data-toggle="modal" data-target="#chooseFolder">
                <button id="rename" class="btn btn-success btn-lg" ng-click="rename()" style="display:none">命名</button>
                <button id="ready_load" class="btn btn-primary btn-lg" onclick="javascript:_t.upload();">上传</button>
                <button id="is_loading" class="btn btn-primary btn-lg" onclick="javascript:_t.upload();" style="display:none">上传中.</button>
            </div>
        </div>
    </div>

    <!--选择文件夹模态框-->
    <div class="modal fade" id="chooseFolder" tabindex="-1" aria-labelledby="chooseFolderLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <p>选择目录</p>
                    <!--不显示-->
                    <!--<ol style="list-style:none;padding-left:0px;">
                        <li ng-repeat="curFolderName in curFolderNames">
                            <span style="display:none;">{{curfoldername.properties.name}}</span>
                            <div ng-if="curID!==0&&($index==1)">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                                <button ng-click="goBackToLastFolder($index)">返回上一级</button>
                            </div>
                        </li>
                    </ol>-->
                    <div ng-if="curID!==0">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <button ng-click="goBackToLastFolder()">返回上一级</button>
                    </div>
                </div>
                <div class="modal-body">
                    <!--模态框主体部分-->
                    <div ng-show="notLastFolder">
                        <table class="table table-striped modalTable">
                            <tr ng-repeat="folder in folders">
                                <td ng-click="subfolder(folder)" id="folderList">
                                    <div class="folderList">
                                        <div class="folderName">{{folder.properties.name}}</div>
                                    </div>
                                </td>
                                <td id="folderButton">
                                    <button class="btn btn-sm btn-primary" ng-click="setFolder($index)">选择</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div ng-show="!notLastFolder" class="empty">
                        <img src="images/empty.png" />
                        <p>该目录下没有文件夹</p>
                    </div>
                </div>
                <!--body-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                </div>
                <!--footer-->
            </div>
            <!--content-->
        </div>
        <!--dialog-->
    </div>


    <!--文件夹上传成功模态框-->
    <div class="modal fade" id="upload_success" tabindex="-1" aria-labelledby="upload_successLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <!--模态框主体部分-->
                    <p>上传成功</p>
                </div>
                <!--body-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" ng-click="upload_success_close()" data-dismiss="modal">
                        关闭
                    </button>
                </div>
                <!--footer-->
            </div>
            <!--content-->
        </div>
        <!--dialog-->
    </div>

    <!--文件重命名模态框-->
    <div class="modal fade" id="renameModal" tabindex="-1" aria-labelledby="renameModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    文件原名：{{fileName}}
                </div>
                <div class="modal-body">
                    <!--模态框主体部分-->
                    <input type="text" class="form-control input-lg" ng-model="new_fileName">
                </div>
                <!--body-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-sm" ng-click="confirmRename()">
                        确认修改
                    </button>
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
                        关闭
                    </button>
                </div>
                <!--footer-->
            </div>
            <!--content-->
        </div>
        <!--dialog-->
    </div>

    <script type="text/javascript">
        /////上传文件设置
        var config = {
            browseFileId: "i_select_files", /** 选择文件的ID, 默认: i_select_files */
            browseFileBtn: '<img id="camera" src="images/camera.png"/>', /** 显示选择文件的样式, 默认: `<div>请选择文件</div>` */
            dragAndDropArea: "i_select_files", /** 拖拽上传区域，Id（字符类型"i_select_files"）或者DOM对象, 默认: `i_select_files` */
            dragAndDropTips: "<span><span>", /** 拖拽提示, 默认: `<span>把文件(文件夹)拖拽到这里</span>` */
            filesQueueId: "i_stream_files_queue", /** 文件上传容器的ID, 默认: i_stream_files_queue */
            filesQueueHeight: 200, /** 文件上传容器的高度（px）, 默认: 450 */
            messagerId: "i_stream_message_container", /** 消息显示容器的ID, 默认: i_stream_message_container */
            multipleFiles: true, /** 多个文件一起上传, 默认: false */
            autoUploading: false, /** 选择文件后是否自动上传, 默认: true */
            //		autoRemoveCompleted : true, /** 是否自动删除容器中已上传完毕的文件, 默认: false */
            //		maxSize: 104857600//, /** 单个文件的最大大小，默认:2G */
            //		retryCount : 5, /** HTML5上传失败的重试次数 */
            //		postVarsPerFile : { /** 上传文件时传入的参数，默认: {} */
            //			param1: "val1",
            //			param2: "val2"
            //		},
            swfURL: "../swf/FlashUploader.swf", /** SWF文件的位置 */
            tokenURL: "../upload/tk", /** 根据文件名、大小等信息获取Token的URI（用于生成断点续传、跨域的令牌） */
            uploadURL: "../upload/file", /** HTML5上传的URI */
            //		frmUploadURL: "FileUpload.ashx?Method=fd;", /** Flash上传的URI */
            //simLimit: 4, /** 单次最大上传文件个数 */
            extFilters: [".bmp", ".jpg", ".png", ".tiff", ".gif", ".pcx", ".tga", ".exif", ".fpx", ".svg", ".psd", ".cdr", ".pcd", ".dxf", ".ufo", ".eps", ".ai", ".raw", ".WMF"], /** 允许的文件扩展名, 允许上传文件类型默认: [] */
            onSelect: onSelected, /**function(list) {alert('onSelect')},  选择文件后的响应事件 */
            //		onMaxSizeExceed: function(size, limited, name) {alert('onMaxSizeExceed')}, /** 文件大小超出的响应事件 */
            //onFileCountExceed: function(selected, limit) {alert('最多只能上传4张图片！')}, /** 文件数量超出的响应事件 */
            //		onExtNameMismatch: function(name, filters) {alert('onExtNameMismatch')}, /** 文件的扩展名不匹配的响应事件 */
            //		onCancel : function(file) {alert('Canceled:  ' + file.name)}, /** 取消上传文件的响应事件 */
            onComplete: CompleteUpload,//function(file) {alert('onComplete')}, /** 单个文件上传完毕的响应事件 */
            //		onQueueComplete: function() {alert('onQueueComplete')}, /** 所有文件上传完毕的响应事件 */
            onUploadError: function (status, msg) { alert('onUploadError' + status + ":" + msg) } /** 文件上传出错的响应事件 */
        };

        var _t = new Stream(config);

        var existingObj = ""; //已有对象

        document.getElementById("previewPic").style.display = "none"; //隐藏文件预览框，待选择文件后，方进行展示

        function onSelected(file) {
            var appElement = document.querySelector('[ng-controller=demoCtrl]');
            var $scope = angular.element(appElement).scope();
            $scope.$apply;
        }

        function CompleteUpload(file) {
            //alert(JSON.stringify(file));
            //return;
            var $scope = angular.element(document.getElementById('b')).scope();
            var filename = JSON.parse(file.msg).filepath;
            var words = filename.split('\\');
            var md5 = words[words.length - 1];
            var SysFile = {
                "id": 0,
                "type": "SysFile",
                "properties": {
                    "filesize": file.size + "",
                    "name": $scope.fileName,
                    "filename": JSON.parse(file.msg).filepath,
                    "md5": md5

                }
            }
            //检查文件MD5是否已经存在
            FileExists(SysFile);
            var appElement = document.querySelector('[ng-controller=demoCtrl]');
            var $scope = angular.element(appElement).scope();
            $scope.$apply;
            existingObj = $scope.existingObj;
        }

        //FileExists
        function FileExists(SysFile) {
            var $scope = angular.element(document.getElementById('b')).scope();
            var param = {
                "connectionId": 1,
                "user": {
                    "id": $scope.userinfo.user.id,
                    "type": "SysPerson"
                },
                "appName": "pdm",
                "file": SysFile
            }
            $.ajax({
                cache: false,
                type: "POST",
                contentType: "application/json",
                url: '../app/invoke?fun=FileExists',
                data: JSON.stringify(param),

                success: function (data) {
                    var FileExistsResponse = JSON.parse(data);
                    if (FileExistsResponse.resFlag == 0) {
                        if (FileExistsResponse.result.id == 0) { //表示文件不存在
                            UploadFile(SysFile) //则上传的SysFile对象id=0
                        } else {
                            UploadFile(FileExistsResponse.result) //则上传的已经存在的SysFile
                        }
                    } else {
                        alert(FileExistsResponse.errMsg);
                    }
                }
            });
        }



        //UploadFile
        function UploadFile(SysFile) {
            var $scope = angular.element(document.getElementById('b')).scope();
            var param = {
                "connectionId": 1,
                "user": {
                    "id": $scope.userinfo.user.id,
                    "type": "SysPerson"
                },
                "appName": "pdm",
                "file": SysFile
            }

            $.ajax({
                cache: false,
                type: "POST",
                contentType: "application/json",
                url: '../app/invoke?fun=UploadFile',
                data: JSON.stringify(param),

                success: function (data) {
                    var UploadFileResponse = JSON.parse(data);
                    if (UploadFileResponse.resFlag == 0) {
                        var doc = UploadFileResponse.result;
                        doc.id = 0;
                        doc.type = "PdmDocumentRev"
                        correlate(existingObj, doc, "PdmFolderDocument", 17)
                    } else {
                        alert(UploadFileResponse.errMsg);
                    }
                }
            });

        }

        //使有相互关系
        function correlate(objA, objB, relationName, childrenStrategy) {
            var graph = {
                "roots": [
                    {
                        "entity": objA,
                        "nodeId": 0,
                        "children": [
                            {
                                "entity": objB,
                                "relation": {
                                    "properties": {},
                                    "lId": 0,
                                    "lType": relationName,
                                    "objIdA": objA.id,
                                    "aClassType": objA.type,
                                    "objIdB": objB.id,
                                    "bClassType": objB.type
                                },
                                "nodeId": 1,
                                "children": [],
                                "strategy": childrenStrategy
                            }
                        ],
                        "strategy": 136
                    }
                ]
            };
            $.ajax({
                cache: false,
                type: "POST",
                contentType: "application/json",
                url: '../jridgeadvanced/batchdo',
                data: JSON.stringify(graph),

                success: function (data) {
                    var batchdoResponse = JSON.parse(data);
                    if (batchdoResponse.resFlag == 0) {
                        var $scope = angular.element(document.getElementById('b')).scope();
                        $scope.subfolder($scope.parentObj);
                        document.getElementById("loading").style.display = "none"; //关闭等待框		
                        document.getElementById("rename").style.display = "block"; //显示重命名框	
                        document.getElementById("ready_load").style.display = "block"; //显示上传按钮
                        document.getElementById("is_loading").style.display = "none"; //隐藏正在上传按钮
                        $scope.fileName = ""; //清空文件名
                        $('#upload_success').modal('show');
                        $('.stream-files-scroll').text('');
                        $('#i_stream_message_container').text('');
                    } else {
                        alert(batchdoResponse.errMsg);
                    }

                }
            });
        }



    </script>

</body>

</html>